<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    v-loading="loading"
    class="container"
    style="font-size: 0.8rem;"
    width="100%"
  >
    <el-table
      :data="value"
      border
      tooltip-effect="dark"
    >
      <el-table-column
        label="订单编号" width="120"
      >
        <template slot-scope="scope">{{ scope.row.sn }}</template>
      </el-table-column>

      <el-table-column
        label="商品信息" width="110">
        <template slot-scope="scope">
          <h-good-info-display v-model="scope.row" :displayInfo="false"></h-good-info-display>
        </template>
      </el-table-column>

      <el-table-column label="商品规格" min-width="100">
        <template slot-scope="scope">
          <h-specs-display v-model="scope.row"></h-specs-display>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="160" prop="createTime">
      </el-table-column>
      <el-table-column label="订单信息" min-width="200">
        <template slot-scope="scope">
          <h-order-info-display v-model="scope.row" :createTime="false"></h-order-info-display>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" min-width="200">
        <template slot-scope="scope">
          <h-order-pay-info-display v-model="scope.row"></h-order-pay-info-display>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          <h-order-status-display v-model="scope.row" :pay="true"
                                  :arrival="true"></h-order-status-display>
        </template>
      </el-table-column>
    </el-table>

    <div class="h-form">
      <div class="form-label">
        <span class="red">*</span> 选择要改名到的用户:
      </div>
      <div class="form-content" style="width: 240px">
        <h-user-choose v-model="userId"></h-user-choose>
      </div>
    </div>
    <div v-if="value!=null" slot="footer" style="text-align: center">
      <el-button type="primary" v-loading="loading" @click="doRename"> 确定更名</el-button>
      <el-button @click="closed"> 关闭</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'
  import HUserChoose from 'src/components/common/HUserChoose'

  export default {
    name: 'HRenameDialog',
    mixins: [Dialog],
    components: {
      HUserChoose,
      HOrderStatusDisplay,
      HGoodInfoDisplay,
      HSpecsDisplay,
      HOrderInfoDisplay,
      HOrderPayInfoDisplay
    },
    data() {
      return {
        loading: false,
        userId: null
      }
    },
    watch: {
      value: function (c, d) {
        this.userId = null
      }
    },
    props: {
      value: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      doRename: function () {
        const me = this
        if (me.userId != null) {
          const ids = me.value.map(d => {
            return d.id
          })
          const data = {
            ids: ids,
            newBuyerId: me.userId,
            note: ''
          }
          this.loading = true
          FrontService.orderRename(data).then(d => {
            if (d != null) {
              me.$message.success('申请更名成功!')
              me.$emit('success', me.datas)
            } else {
              me.$message.error('申请更名失败!')
            }
            setTimeout(function () {
              me.loading = false
            }, 1000)
          })
        } else {
          me.$message.error('请选择需要转让人的信息')
        }
      }
    }
  }
</script>
